<script lang="ts">
import type { PropType } from 'vue';

export default defineComponent({
  props: {
    layoutMode: {
      type: String as PropType<'static' | 'overlay'>,
      default: 'static'
    }
  },
  emits: ['layoutChange'],
  setup() {
    const primevue = usePrimeVue();

    const rippleActive = computed({
      get() {
        return primevue.config.ripple;
      },
      set(value) {
        primevue.config.ripple = value;
      }
    });

    return {
      rippleActive
    };
  },
  data() {
    return {
      active: false,
      d_layoutMode: this.layoutMode,
      scale: 14,
      scales: [12, 13, 14, 15, 16]
    };
  },
  computed: {
    containerClass() {
      return ['layout-config', { 'layout-config-active': this.active }];
    },
    inputStyle() {
      return this.$primevue.config.inputStyle;
    }
  },
  watch: {
    $route() {
      if (this.active) {
        this.active = false;
        this.unbindOutsideClickListener();
      }
    },
    layoutMode(newValue) {
      this.d_layoutMode = newValue;
    }
  },
  outsideClickListener: null,
  methods: {
    toggleConfigurator(event: MouseEvent) {
      this.active = !this.active;
      event.preventDefault();

      if (this.active) {
        this.bindOutsideClickListener();
      } else {
        this.unbindOutsideClickListener();
      }
    },
    hideConfigurator(event: MouseEvent) {
      this.active = false;
      this.unbindOutsideClickListener();
      event.preventDefault();
    },
    changeInputStyle(value: string) {
      this.$primevue.config.inputStyle = value;
    },
    changeLayout(event: Event, layoutMode: string) {
      this.$emit('layoutChange', layoutMode);
      event.preventDefault();
    },
    bindOutsideClickListener() {
      if (!this.outsideClickListener) {
        this.outsideClickListener = (event) => {
          if (this.active && this.isOutsideClicked(event)) {
            this.active = false;
          }
        };
        document.addEventListener('click', this.outsideClickListener);
      }
    },
    unbindOutsideClickListener() {
      if (this.outsideClickListener) {
        document.removeEventListener('click', this.outsideClickListener);
        this.outsideClickListener = null;
      }
    },
    isOutsideClicked(event: Event) {
      return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target));
    },
    decrementScale() {
      this.scale--;
      this.applyScale();
    },
    incrementScale() {
      this.scale++;
      this.applyScale();
    },
    applyScale() {
      document.documentElement.style.fontSize = `${this.scale}px`;
    },
    changeTheme(event: any, theme: string, dark?: boolean) {
      this.$appState.theme = theme;
      this.$appState.darkTheme = dark;

      if (theme.startsWith('md')) {
        this.$primevue.config.ripple = true;
      }
    }
  }
});
</script>

<template>
  <div id="layout-config" :class="containerClass">
    <a id="layout-config-button" href="#" class="layout-config-button" @click="toggleConfigurator">
      <i class="pi pi-cog" />
    </a>
    <Button class="p-button-danger layout-config-close p-button-rounded p-button-text" icon="pi pi-times" :style="{ 'z-index': 1 }" @click="hideConfigurator" />

    <div class="layout-config-content">
      <h5 class="mt-0">
        Component Scale
      </h5>
      <div class="config-scale">
        <Button icon="pi pi-minus" class="p-button-text" :disabled="scale === scales[0]" @click="decrementScale()" />
        <i v-for="s of scales" :key="s" class="pi pi-circle-on" :class="{ 'scale-active': s === scale }" />
        <Button icon="pi pi-plus" class="p-button-text" :disabled="scale === scales[scales.length - 1]" @click="incrementScale()" />
      </div>

      <h5>Input Style</h5>
      <div class="p-formgroup-inline">
        <div class="field-radiobutton">
          <RadioButton
            id="input_outlined" name="inputstyle" value="outlined"
            :model-value="$primevue.config.inputStyle"
            @change="changeInputStyle('outlined')"
          />
          <label for="input_outlined">Outlined</label>
        </div>
        <div class="field-radiobutton">
          <RadioButton
            id="input_filled" name="inputstyle" value="filled"
            :model-value="$primevue.config.inputStyle"
            @change="changeInputStyle('filled')"
          />
          <label for="input_filled">Filled</label>
        </div>
      </div>

      <h5>Ripple Effect</h5>
      <InputSwitch v-model="rippleActive" />

      <h5>Menu Type</h5>
      <div class="p-formgroup-inline">
        <div class="field-radiobutton">
          <RadioButton
            id="static" v-model="d_layoutMode" name="layoutMode"
            value="static"
            @change="changeLayout($event, 'static')"
          />
          <label for="static">Static</label>
        </div>
        <div class="field-radiobutton">
          <RadioButton
            id="overlay" v-model="d_layoutMode" name="layoutMode"
            value="overlay"
            @change="changeLayout($event, 'overlay')"
          />
          <label for="overlay">Overlay</label>
        </div>
      </div>

      <h5>Themes</h5>
      <h6 class="mt-0">
        Bootstrap
      </h6>
      <div class="grid free-themes">
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-blue')">
            <img class="block" src="/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-purple')">
            <img class="block" src="/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-blue', true)">
            <img class="block" src="/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-purple', true)">
            <img class="block" src="/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue">
          </button>
        </div>
      </div>

      <h6>Material Design</h6>
      <div class="grid free-themes">
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'md-light-indigo')">
            <img class="block" src="/images/themes/md-light-indigo.svg" alt="Material Light Indigo">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'md-light-deeppurple')">
            <img class="block" src="/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'md-dark-indigo', true)">
            <img class="block" src="/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'md-dark-deeppurple', true)">
            <img class="block" src="/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple">
          </button>
        </div>
      </div>

      <h6>Material Design Compact</h6>
      <div class="grid free-themes">
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-indigo')">
            <img class="block" src="/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-deeppurple')">
            <img class="block" src="/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-indigo', true)">
            <img class="block" src="/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-deeppurple', true)">
            <img class="block" src="/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple">
          </button>
        </div>
      </div>

      <h6>Tailwind</h6>
      <div class="grid free-themes">
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'tailwind-light')">
            <img class="block" src="/images/themes/tailwind-light.png" alt="Tailwind Light">
          </button>
        </div>
      </div>

      <h6>Fluent UI</h6>
      <div class="grid free-themes">
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'fluent-light')">
            <img class="block" src="/images/themes/fluent-light.png" alt="Fluent Light">
          </button>
        </div>
      </div>

      <h6>PrimeOne Design - 2022</h6>
      <div class="grid free-themes">
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-indigo')">
            <img class="block" src="/images/themes/lara-light-indigo.png" alt="Lara Light Indigo">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-blue')">
            <img class="block" src="/images/themes/lara-light-blue.png" alt="Lara Light Blue">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-purple')">
            <img class="block" src="/images/themes/lara-light-purple.png" alt="Lara Light Purple">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-teal')">
            <img class="block" src="/images/themes/lara-light-teal.png" alt="Lara Light Teal">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-indigo', true)">
            <img class="block" src="/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-blue', true)">
            <img class="block" src="/images/themes/lara-dark-blue.png" alt="Lara Dark Blue">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-purple', true)">
            <img class="block" src="/images/themes/lara-dark-purple.png" alt="Lara Dark Purple">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-teal', true)">
            <img class="block" src="/images/themes/lara-dark-teal.png" alt="Lara Dark Teal">
          </button>
        </div>
      </div>

      <h6>PrimeOne Design - 2021</h6>
      <div class="grid free-themes">
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'saga-blue')">
            <img class="block" src="/images/themes/saga-blue.png" alt="Saga Blue">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'saga-green')">
            <img class="block" src="/images/themes/saga-green.png" alt="Saga Green">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'saga-orange')">
            <img class="block" src="/images/themes/saga-orange.png" alt="Saga Orange">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'saga-purple')">
            <img class="block" src="/images/themes/saga-purple.png" alt="Saga Purple">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'vela-blue', true)">
            <img class="block" src="/images/themes/vela-blue.png" alt="Vela Blue">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'vela-green', true)">
            <img class="block" src="/images/themes/vela-green.png" alt="Vela Green">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'vela-orange', true)">
            <img class="block" src="/images/themes/vela-orange.png" alt="Vela Orange">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'vela-purple', true)">
            <img class="block" src="/images/themes/vela-purple.png" alt="Vela Purple">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'arya-blue', true)">
            <img class="block" src="/images/themes/arya-blue.png" alt="Arya Blue">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'arya-green', true)">
            <img class="block" src="/images/themes/arya-green.png" alt="Arya Green">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'arya-orange', true)">
            <img class="block" src="/images/themes/arya-orange.png" alt="Arya Orange">
          </button>
        </div>
        <div class="col-3 text-center">
          <button class="p-link" type="button" @click="changeTheme($event, 'arya-purple', true)">
            <img class="block" src="/images/themes/arya-purple.png" alt="Arya Purple">
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
